<template>

  <div class="outer-box">  
        <div class="test">
      <p class="title">专业变化<icon iconClass="shu" color='white'></icon></p>
    </div>
    <div :style="{ position:'absolute', left:'40px', top:'80px',width: '243px',height: '243px',border:' 8px dashed rgb(96, 96, 96,0.3) ',borderRadius:'50%'}">
    <div
      class="echart"
      id="echart-line"
      :style="{ width: '243px', height: '243px' ,position:'relative'}"
    ></div>
  </div> 
 </div>
</template>

<script>
import * as echarts from "echarts";

export default {
  mounted() {
    this.initChart();
  },
  methods: {
    initChart(name, xData, yData) {
      let getchart = echarts.init(document.getElementById("echart-line"));
      var option = {
        series: [
          {
            name: "Access From",
            type: "pie",
            radius: ["50%", "70%"],
            avoidLabelOverlap: false,
            label: {
              show: false,
              position:'center',
              fontSize: "14px",
              formatter: "{b}",
            },
            emphasis: {
              label: {
                show: true,
                fontSize: "20px",
                fontWeight: "bold",
              },
            },
            data: [
              { value: 1048, name: "新增文科专业34%" },
              { value: 735, name: "原有专业46%" },
              { value: 580, name: "新增工科专业12%" },
              { value: 300, name: "新增艺术专业8%" },
            ],
            //option 中添加

            color: {
              colorStops: [
                {
                  offset: 0,
                  color: "#EF838E", // 0% 处的颜色
                },
                {
                  offset: 0.5,
                  color: "#FF4D15", 
                },
                {
                  offset: 1,
                  color: "#D5492E", // 100% 处的颜色
                },
              ],
            },
          },
        ],
      };

      getchart.setOption(option);
      //随着屏幕大小调节图表
      window.addEventListener("resize", () => {
        getchart.resize();
      });
    },
  },
};
</script>

<style lang="less" scoped>
.outer-box{
    width: 507px * @topx;
    height: 457px * @topx;
    display: flex;
}
.title {
  transform: translate(-30px,-30px);
  width: 32px;
  height: 260px;
  margin-top: 40px;
  font-size: 20px;
  color: #fff;
  text-align: center;
  border-radius: 0.5%;
  border-left: 2px solid #fff;
  border-image: linear-gradient(#fff, #fff0) 30 30;
  /* border-image-source: linear-gradient(to bottom, #8f41e9, #578aef); */
  background: linear-gradient(to bottom, #ee995e, rgba(0,0,0,0));
}
</style>